import { useState } from 'react'
import { Form, Row, Col, Select, Input, Switch, DatePicker } from 'antd'
import '../styles/EditContent.scss'
import HCUpload from '@/components/hc-upload'
import { useEffect } from 'react'
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
const { TextArea } = Input

const EditContent = ({ initialValues, setForm, formOptions, fileList, setFileList }) => {
  const [form] = Form.useForm()
  const [content, setContent] = useState('')
  const [implementation, setImplementation] = useState('')
  const [remark, setRemark] = useState('')
  const { projectList, languageList, typeList } = formOptions

  // 初始化数据
  useEffect(() => {
    form.setFieldsValue(initialValues)
    if (initialValues.content) setContent(initialValues.content)
    if (initialValues.implementation) setImplementation(initialValues.implementation)
    if (initialValues.remark) setRemark(initialValues.remark)
  }, [initialValues])

  return (
    <div className='pdca-edit-content'>
      <Form form={form}
        onValuesChange={(_, values) => {
          setForm(values);
          if (values.content) setContent(values.content)
          if (values.implementation) setImplementation(values.implementation)
          if (values.remark) setRemark(values.remark)
        }}>
        <Row justify="space-between" gutter={100}>
          <Col span={8}>
            <Form.Item label="项目名称" name="project_id">
              <Select options={(projectList || []).map(item => ({ label: item.value, value: item.id }))} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="任务类型" name="type_id">
              <Select options={(typeList || []).map(item => ({ label: item.value, value: item.id }))} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="开发语言" name="language_id">
              <Select options={(languageList || []).map(item => ({ label: item.value, value: item.id }))} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="是否收藏" name="mark">
              <Switch disabled />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="开始时间" name="start_on">
              <DatePicker placeholder="" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="结束时间" name="finish_on">
              <DatePicker placeholder="" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="任务内容" name="content">
              {/* <TextArea rows={10} /> */}
              <MdEditor modelValue={content}/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="实施方案" name="implementation">
              {/* <TextArea rows={10} /> */}
              <MdEditor modelValue={implementation}/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="任务备注" name="remark">
              {/* <TextArea rows={10} /> */}
              <MdEditor modelValue={remark}/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item label="附件信息" name="file_list">
              <HCUpload fileList={fileList} setFileList={setFileList} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default EditContent
